import React,{useState} from 'react'
import Header1 from '../../components/MyLayout/Header1'
import {CloseOutlined,RightOutlined,FormOutlined,} from '@ant-design/icons'
import { Drawer,Table,message,Modal } from 'antd';

import './Guanli.css'
export default function Guanli() {
    const [messageApi,contextHolder] = message.useMessage()
    
    let [bol,setBol] = useState(false);
    let [val,setVal] = useState('');
    let [val1,setVal1] = useState('');
    let [val2,setVal2] = useState('');
    let [num,setNum] = useState(3);
    let [bol1,setBol1] = useState(true);
    let [bol2,setBol2] = useState(true);
    let [bol3,setBol3] = useState(false);
    let [bol4,setBol4] = useState(false);
    let arr = [
        {
            name:'北京国贸项目',
            name1:'招商',
            name2:'运营',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
        {
            name:'北京国贸项目',
            name1:'招商',
            name2:'运营',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
        {
            name:'北京国贸项目',
            name1:'招商',
            name2:'运营',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
        {
            name:'北京国贸项目',
            name1:'招商',
            name2:'',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
        {
            name:'北京国贸项目',
            name1:'',
            name2:'运营',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
    ]
    let [arr1,setArr1] = useState([
        {
            name:'北京国贸项目',
            name1:'招商',
            name2:'运营',
            num:10,
            jie:'接受',
            ju:'拒绝'
        },
    ]);
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    const [open1, setOpen1] = useState(false);
    const showDrawer1 = () => {
        setOpen1(true);
    };
    const onClose1 = () => {
        setOpen1(false);
    };
    const tou =[
        {
            title: '登陆账号',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title:'备注姓名',
            dataIndex:'name1',
            key:'name1'
        },
        {
            title:'项目加入时间',
            dataIndex:'name2',
            key:'name2'
        }
    ];
    const data = [
        {
            key: '1',
            name: '12994821',
            name1: '鸣人',
            name2: '2019/08/19',
        },
        {
            key: '2',
            name: '12994821',
            name1: '佐助',
            name2: '2019/08/19',
        },
        {
            key: '3',
            name: '12994821',
            name1: '长十郎',
            name2: '2019/08/19',
        }
    ]
    const [tou1,setTou1] = useState([
        {
            title: '登录账号',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title:'备注姓名',
            dataIndex:'name1',
            key:'name1'
        },
        {
            title:'状态',
            dataIndex:'name2',
            key:'name2'
        },
        {
            title:'操作',
            dataIndex:'name3',
            key:'name3'
        }
    ])
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
      };
      const handleOk = () => {
        setIsModalOpen(false);
      };
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    let [csh,setCsh] = useState('')
    let [zhr,setZhr] = useState('李子2')
    let [fml,setFml] = useState('李子3')
    const [data1,setData1] =useState([
        {
            key: '1',
            name: <p>
                1234567890
                <span style={{
                    width:'45px',
                    height:'18px',
                    marginLeft:'10px',
                    display:'inline-block',
                    background:'#F1EFFF',
                    color:'#8479E3 ',
                    fontSize:'12px',
                    textAlign:'center',
                    lineHeight:'18px',
                }}>管理员</span>
            </p>,
            name1: <div>
            <input value={csh} placeholder='李子1' onChange={(e)=>{
                setCsh(e.target.value)
            }} style={{
            width:'50px',
            height:'14.2px',
            border:'none'}} />
            <FormOutlined />
        </div> ,
            name2:'正常',   
            name3:''
        },
        {
            key: '2',
            name: '1234567890',
            name1: <div>
            <input value={zhr} onChange={(e)=>{
                setZhr(e.target.value)
            }} style={{
            width:'50px',
            height:'14.2px',
            border:'none'}} />
            <FormOutlined />
        </div> ,
            name2:'未激活',
            name3:<div style={{
                width:'80px',
                height:'15px',
                display:'flex',
                justifyContent:'space-between',
                fontSize:'12px',
                cursor:'pointer'
            }}>
                    <p style={{color:'#8479E3'}}>权限</p>
                    <p style={{color:'#f00'}} onClick={()=>{
                                        showModal()
                                    }}>删除</p>
            </div>
        },
        {
            key: '3',
            name: '1234567890',
            name1:<div>
                <input value={fml} onChange={(e)=>{
                setFml(e.target.value)
            }} style={{
                width:'50px',
                height:'14.2px',
                border:'none'}} />
                <FormOutlined />
            </div> ,
            
            name2:'已退出',
            name3:<div style={{
                width:'80px',
                height:'15px',
                display:'flex',
                justifyContent:'space-between',
                fontSize:'12px',
                cursor:'pointer'
            }}>
                    <p style={{color:'#8479E3'}}>权限</p>
                    <p style={{color:'#f00'}}  onClick={()=>{
                                        showModal()
                                    }}>删除</p>
            </div>
        },
            
    ])
  return (
    <>
      <Header1/>
      {/* 内容 */}
      {contextHolder}
      <div className='guanli'>
            <div className='guanli1'>
                <p style={{
                    marginBottom: '20px',
                }}>我负责的项目</p>
                <div className='guanli2'>
                        <p onClick={()=>{
                            setBol(true)
                        }} className='guanli3'></p>{arr1.map((item,index)=>{
                                    return <div onClick={()=>{
                                        console.log(11);
                                        showDrawer()
                                    }} key={index} className='guanli5'>
                                    <p onClick={(e)=>{
                                        e.stopPropagation()
                                        setBol3(true)
                                        console.log();
                                    }} >{item.name}</p>
                                    {item.name1==='招商'?<span style={item.name1==='招商'?{color:'#75C476'}:{color:'#FF8F00',background:'#FFF0DB'}}>{item.name1}</span>:null}
                                    {item.name2==='运营'?<span style={item.name2==='招商'?{color:'#75C476'}:{color:'#FF8F00',background:'#FFF0DB'}}>{item.name2}</span>:null}
                                    <p>人数({item.num}) </p>
                                    <div className='guanli17'>
                                        <p>转让</p>
                                        <p onClick={(e)=>{
                                            e.stopPropagation()
                                            showDrawer1()
                                        }}>人员管理</p>
                                    </div>
                                </div>
                                })}
                </div>
                
            </div>
            <div className='guanli1'>
                <p style={{
                    marginBottom: '20px',
                }}>我加入的项目</p>
                <div className='guanli2'>
                    {arr.map((item,index)=>{
                        return <div key={index} className='guanli5'>
                        <p>{item.name}</p>
                        {/* 判断当name1为招商的时候return一个span标签 */}
                        {item.name1==='招商'?<span style={item.name1==='招商'?{color:'#75C476'}:{color:'#FF8F00',background:'#FFF0DB'}}>{item.name1}</span>:null}
                        {item.name2==='运营'?<span style={item.name2==='招商'?{color:'#75C476'}:{color:'#FF8F00',background:'#FFF0DB'}}>{item.name2}</span>:null}
                        <p>人数({item.num}) </p>
                        <div className='guanli4'>
                            <p>拒绝</p>
                            <p>接受</p>
                        </div>
                    </div>
                    })
                        }
                </div>
            </div>
            {bol&&<div className='guanli6'>
                <div className='guanli7'>
                    <h4>新建项目 <CloseOutlined  onClick={()=>{
                        setBol(false)
                    }}/></h4>
                    <p className='guanli8'><span>*</span>项目名称</p>
                    <p><input type="text" className='guanli9' value={val} placeholder='请输入' onChange={(e)=>{
                        setVal(e.target.value)
                    }}/></p>
                    <p className='guanli8'><span>*</span>开通模块</p>
                    <div className='guanli10'>
                        <p>
                            <span>招商</span>
                            <span>空间定价 | 租控 | 租约</span>
                            {bol1?<span onClick={()=>setBol1(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol1(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>运营</span>
                            <span>公告 | 服务保修 | 投诉建议</span>
                            {bol2?<span onClick={()=>setBol2(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol2(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>社区</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>设备设施</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>增值服务</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>数据</span>
                            <span>即将上线～</span> 
                        </p>
                    </div>
                    <div className='guanli11' onClick={()=>{
                        setBol(false)
                        let obj={
                            name:val,
                            name1:bol1?'':'招商',
                            name2:bol2?'':'运营',
                            num:1,
                            zhuan:'转让',
                            guan:'人员管理'
                        }
                        setArr1([...arr1,obj])
                    }}>保存</div>
                </div>
            </div>}
            {bol3&&<div className='guanli6'>
                <div className='guanli7'>
                    <h4>项目编辑 <CloseOutlined  onClick={()=>{
                        setBol3(false)
                    }}/></h4>
                    <p className='guanli8'><span>*</span>项目名称</p>
                    <p><input type="text" className='guanli9' value={val} placeholder='请输入' onChange={(e)=>{
                        setVal(e.target.value)
                    }}/></p>
                    <p className='guanli8'><span>*</span>开通模块</p>
                    <div className='guanli10'>
                        <p>
                            <span>招商</span>
                            <span>空间定价 | 租控 | 租约</span>
                            {bol1?<span onClick={()=>setBol1(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol1(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>运营</span>
                            <span>公告 | 服务保修 | 投诉建议</span>
                            {bol2?<span onClick={()=>setBol2(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol2(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>社区</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>设备设施</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>增值服务</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>数据</span>
                            <span>即将上线～</span> 
                        </p>
                    </div>
                    <div className='guanli11' onClick={()=>{
                        setBol(false)
                        let obj={
                            name:val,
                            name1:bol1?'':'招商',
                            name2:bol2?'':'运营',
                            num:1,
                            zhuan:'转让',
                            guan:'人员管理'
                        }
                        setArr1([...arr1,obj])
                    }}>保存</div>
                </div>
            </div>}
            <Drawer width='720px' title="北京国贸项目" onClose={onClose} extra={
                <div className='guanli12'>
                    <span>转让</span>
                    <span>删除</span>
                </div>
        } open={open}>
                <div className='guanli13'>
                    <p className='guanli14'>基础信息</p>
                    <div className='guanli15'>
                        <div>
                            <span>项目管理员</span>
                            <span>张三</span>
                        </div>
                        <div>
                            <span>项目创建时间</span>
                            <span>2019/08/30  12:32:30</span>
                        </div>
                    </div>
                </div>
                <div className='guanli16'>
                    <div className='guanli14'><span>项目成员</span> <span>管理</span></div>
                    <Table pagination={false} columns={tou} dataSource={data} />
                </div>
                <p className='guanli8' style={{marginTop:'30px'}}><span>*</span>开通模块</p>
                    <div className='guanli10'>
                        <p>
                            <span>招商</span>
                            <span>空间定价 | 租控 | 租约</span>
                            {bol1?<span onClick={()=>setBol1(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol1(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>运营</span>
                            <span>公告 | 服务保修 | 投诉建议</span>
                            {bol2?<span onClick={()=>setBol2(false)} style={{background:'#75C476',color:'#fff'}}>开通</span>:<span onClick={()=>setBol2(true)} style={{border:'1px #75C476 solid',color:'#75C476'}}>已开通</span>}
                        </p>
                        <p>
                            <span>社区</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>设备设施</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>增值服务</span>
                            <span>即将上线～</span> 
                        </p>
                        <p>
                            <span>数据</span>
                            <span>即将上线～</span> 
                        </p>
                    </div>
            </Drawer>
            <Drawer width='720px' title="人员管理" onClose={onClose1} open={open1} extra={
                <span onClick={()=>{
                    setBol4(true)
                }} style={{
                    color:'#8479E3',
                    fontSize:'14px',
                }}>添加人员</span>
            }>
                <Table pagination={false} columns={tou1} dataSource={data1} />
            </Drawer>
</div>
            {bol4?<div className='guanli18'>
                <div className='guanli19'>
                    <div style={{display:'flex',justifyContent:'space-between',borderBottom:'1px #ccc solid'}}><h4>添加人员</h4><CloseOutlined /></div>
                    <div style={{width:'100%',height:'46px',fontSize:'14px',display:'flex',alignItems:'center'}}><span style={{color:'#f00',marginRight:'5px'}}>*</span>登录账号</div>
                    <div className='guanli20'>
                        <input type="text" placeholder='中国+86'/>
                        <input type="number" value={val1} placeholder='请输入' onChange={(e)=>{
                            setVal1(e.target.value)
                        }} />
                    </div>
                    <div style={{width:'100%',height:'46px',fontSize:'14px',display:'flex',alignItems:'center'}}><span style={{color:'#f00',marginRight:'5px'}}>*</span>备注姓名</div>
                    <input className='guanli21' placeholder='请输入' value={val2} onChange={(e)=>{
                            setVal2(e.target.value)
                    }}/>
                    <p style={{
                        width:'100%',
                        height:'35px',
                        background:'#8479E3',
                        color:'#fff',
                        borderRadius:'5px',
                        marginTop:'30px',
                        textAlign:'center',
                        lineHeight:'35px',
                    }} onClick={()=>{
                        setBol4(false)
                        setNum(num+1)
                        let obj ={
                            key:num,
                            name:val1,
                            name1:<div>
                            <input value={val2} style={{
                            width:'50px',
                            height:'14.2px',
                            border:'none'}} />
                            <FormOutlined />
                        </div> ,
                            name2:'已激活',
                            name3:<div style={{
                                width:'80px',
                                height:'15px',
                                display:'flex',
                                justifyContent:'space-between',
                                fontSize:'12px',
                                cursor:'pointer'
                            }}>
                                    <p style={{color:'#8479E3'}}>权限</p>
                                    <p style={{color:'#f00'}}>删除</p>
                            </div>
                        }
                        setData1([...data1,obj])
                        setVal1('')
                        setVal2('')
                        messageApi.open({
                            type: 'success',
                            content: '人员配置成功',
                        });
                    }}>保存</p>
                </div>
            </div>:''}
            <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div className='wp1'>

                </div>
            </Modal>
    </>
  )
}
